<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<script type="text/javascript">
    $(document).ready(function(){
        var ajaxLoading=false;
        $("#saveModel").click(function(){
          if(!ajaxLoading){
            ajaxLoading=true;
            var manufacturer = $("#manufacturers option:selected").val();
            var type = $("#types option:selected").val();
            var modelName = $("#modelNames option:selected").val();
            if(manufacturer==""){
                alert("select manufacturer");
            }else if(type==""){
                alert("select cpe type");
            }else if(modelName ==""){
                alert("select model name");
            }else{
                $.ajax({
                        url: "saveNewModel.action",
                        data:{
                             type:type,
                             manufacturer:manufacturer,
                             modelName:modelName
                             },
                        type:"post",
                        success:function(data) {
                             alert(data);

                        }
                });
            }
            ajaxLoading=false;
          }
         });
    });
</script>
<style type="text/css">
     .parts{
            width: 200px;
            display: block;
            margin-left: 0px;
            float: left;
     }
     .partsType{
         margin-left: 50px;
     }
     .partModel{
           width: 440px;
           display: block;
           margin-left: 350px;
           float: left;
           margin-top: 50px;
     }
     .title{
           width: 200px;
     }
     .titleModel{
           width: 440px;
     }
     #first{
           width: 600px;
           height: 50px;
           line-height: 50px;
           font-size: 20px ;
           padding-left: 350px;
           margin-bottom: 50px;
           font-style: italic;
          margin-top: 40px;
     }
     #saveModel{
           float: left;
           margin-left: 380px;
           margin-top: 0px;
     }
</style>
 <div id="first">Adding new model</div>
<div style="width: 800px;margin-left: 100px;display: block;padding-left: 100px;height: 150px;">
    <div class="parts">
        <div class="title">Manufacturer</div>
        <s:select list="manufacturers"  id="manufacturers" listKey="manufacturerId"  listValue="name"  headerKey="" headerValue="--Select Manufacturer--"  name="manufacturers"/>
    </div>
    <div class="parts partsType">
        <div class="title">Device Type</div>
        <s:select list="types" id="types"  listKey="value"  listValue="title"  headerKey="" headerValue="--Select Type--"  name="types"/>
    </div>
    <div class="parts">
        <div class="title">Model</div>
        <s:select list="modelNames" id="modelNames"  listKey="model"  listValue="model"  headerKey="" headerValue="--Select Model--"  name="modelNames"/>
    </div>
</div>
    <button id="saveModel">Save New Model</button>

